<template>
  <div>
    <el-table
      row-key="id"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :data="dataList"
    >
      <el-table-column
        label="名称"
        prop="name"
        sortable
        width="350px"
        min-width="350px"
        align="center"
      >
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>

          <el-tag
            v-if="row.isDefault"
            type="success"
          >
            默认
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="公开"
        prop="isPublic"
        width="200px"
        align="center"
      >
        <template slot-scope="{row}">
          <el-switch
            v-model="row.isPublic"
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column
        label="静态"
        prop="isStatic"
        width="200px"
        align="center"
      >
        <template slot-scope="{row}">
          <el-switch
            v-model="row.isStatic"
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="checkPermission(['AbpIdentity.Roles.ManageOrganizationUnits'])"
        label="操作'"
        align="center"
        width="100px"
      >
        <template slot-scope="{row}">
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDeleteRole(row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="dataTotal>0"
      :total="dataTotal"
      :page.sync="currentPage"
      :limit.sync="pageSize"
      @pagination="refreshPagedData"
    />
  </div>
</template>

<script>
import { getRoles } from '@/api/organizationunit'
import { removeOrganizationUnits } from '@/api/role'
import { abpPagerFormat } from '@/utils'
import EventBusMiXin from '@/mixins/EventBusMiXin'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import checkPermission from '@/utils/permission' // 权限判断函数

export default {
  name: 'RoleOrganizationUint',
  components: {
    Pagination
  },
  mixins: [EventBusMiXin],
  props: {
    organizationUnitId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      organizationUnit: { },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加',
        preview: '查看'
      },
      dataList: [],
      dataTotal: 0,
      pageSize: 10,
      currentPage: 0,
      rules: {
        executionTime: [{ required: true, message: '必须填写', trigger: 'blur' }],
        executionDuration: [{ required: true, message: '必须填写', trigger: 'blur' }]
      },
      downloadLoading: false,
      loading: false,
      tempRoute: {},
      activeNames: ['1']
    }
  },
  watch: {
    organizationUnitId() {
      this.refreshPagedData()
    }
  },
  destroyed() {
    this.unSubscribe('onRoleOrganizationUintChanged')
  },
  created() {
    this.subscribe('onRoleOrganizationUintChanged', this.refreshPagedData)
  },
  methods: {
    checkPermission,
    setTagsViewTitle() {
      let title = this.textMap.create
      if (this.temp.id) {
        title = this.textMap.update
      }
      if (this.isPreview) {
        title = this.textMap.preview
      }

      const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.temp.id}` })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    refreshPagedData() {
      this.getPagedList({})
    },
    processDataFilter() {
      this.dataFilter.skipCount = abpPagerFormat(this.currentPage, this.pageSize)
    },
    getPagedList(dataFilter) {
      if (this.organizationUnitId) {
        getRoles(this.organizationUnitId, dataFilter).then(res => {
          this.dataList = res.data.items
        })
      }
      return this.getEmptyPagedList()
    },
    getEmptyPagedList() {
      this.dataList = []
    },
    handleDeleteRole(row) {
      this.$confirm(
        `确定删除[${row.name}]角色`,
        '提示',
        {
          callback: (action) => {
            if (action === 'confirm') {
              removeOrganizationUnits(row.id, this.organizationUnitId).then(() => {
                this.refreshPagedData()
              })
            }
          }
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
